<template>
	<div class="login">
		<div class="login-bg">
			<div class="login-text">
				<img class="login-logo" src="../assets/LOGO 01.svg" />
				<div class="login-input">
					<div>
						<img src="../assets/人.png" />
						<input type="text" placeholder="输入昵称" />
						
					</div>

					<div>
						<img src="../assets/密码.png" />
						<input type="text" placeholder="设置密码" />
						
					</div>
					<!--<div>
						<img src="../assets/手机.png" />
						<input class="login-tele" type="text" placeholder="手机号" />
						<button class="send-code">发送验证码</button>
					</div>-->
					<button class="login-btn">登录</button>
				</div>
				<p class="str-login">
					<span>没有账号</span>
					<a>注册一个</a>
				</p>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'Login'
	}
</script>

<style>
	button:focus{
		outline: none;
	}
	.login{
		position: absolute;
		z-index: 100;
		top: 70px;
	}
	.str-login{
		font-size: 12px;
	}
	.str-login span{
		color: #b2b2b2;
	}
	.send-code{
		font-size: 12px;
		width: 90px;
		border: #08adff solid 1px;
		background: #f6f7fb;
		color: #08adff;
		height: 41px;
		border-radius: 3px 3px;
	}
	.login-tele{
		width: 130px!important;
	  margin-right: 0!important;
	}
	.login-input div{
		position: relative;
	}
	.login-input img{
		width: 20px;
		top: 20px;
		left: 15px;
		position: absolute;
	}
	.login-text input{
		margin: 9px;
		height: 41px;
		width: 205px;
		border: none;
		background: #f6f7fb;
		border-radius: 4px 4px;
		font-size: 12px;
		padding-left: 30px;
	}
	.login-btn{
		height: 41px;
		width: 235px;
		margin-left: 6px;
		margin-top: 6px;
		border:none;
		background: -moz-linear-gradient(left,#53a6ec,#69e3d8);
		background: -webkit-linear-gradient(left,#53a6ec,#69e3d8);
		color: white;
		border-radius: 3px 3px;
	}
	.login-text{
		width: 250px;
		height: 400px;
		padding: 20px;
		background: white;
		display: inline-block;
		position: relative;
		top: 50px;
		border-radius: 5px 5px;
	}
	.login-logo{
		width: 200px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
.login{
	height: 580px;
	width: 100%;
}
.login-bg{
	position: absolute;
	top: 0px;
	text-align: center;
	height: 680px;
	width:100%;
	background: url(../assets/login.jpg);
}
</style>